<template>
	<view style="padding-top: 80upx;">
		<view class="fixedTop">
			<view class="searchBox flex align-center">
				<image class="searchIcon" src="/static/image/searchw.png"></image>
				<input v-model="keyword" placeholder="请输入商企名称" placeholder-style="color:#fff" />
			</view>
		</view>
		<view class="sBox flex align-center justify-between flex-wrap">
			<block v-for="i in list">
				<square :datas="i" style="margin:20upx 0 0;"></square>
			</block>
		</view>
		<view class="hasmore">{{hasmore?'加载中':'没有更多了'}}</view>
	</view>
</template>

<script>
	import {
		post,
		abortPost,
		get,
		getdistance
	} from '@/utils/post.js'
	import square from './components/square.vue'
	export default {
		components: {
			square
		},
		data() {
			return {
				list: [],
				page: 1,
				page_size: 10,
				hasmore: true,
				keyword: '',
				mch_common_cat_id:''
			}
		},
		onLoad(op) {
			this.latitude = op.lat
			this.longitude = op.lng
			this.getList()
		},
		onReachBottom() {
			if (this.hasmore) {
				abortPost()
				this.getList()
			}
		},
		watch: {
			keyword() {
				abortPost()
				this.page = 1
				this.hasmore = true
				this.list = []
				this.getList()
			}
		},
		methods: {
			getList() {
				var data = {
					page: this.page,
					latitude: this.latitude,
					longitude: this.longitude,
					limit: this.page_size,
					keyword: this.keyword
				}
				get(this.$api.nearby.circle, data, false, res => {
					this.page++
					if (res.code == 0) {
						res.data.list.map(item => {
							item.distance = getdistance(item.latitude,item.longitude,this.latitude,this.longitude)
							this.list.push(item)
						})
						this.hasmore = res.data.list.length == this.page_size
					}
				})
			}
		}
	}
</script>

<style scoped>
	.sBox{
		width: 680upx;
		margin: 0 auto;
	}
	input {
		font-size: 28upx;
		color: #fff;
		width: 500upx;
	}

	.searchBox {
		width: 700upx;
		margin: 0 auto 20upx;
		background: #ffc680;
		height: 60upx;
		border-radius: 30upx;
		font-size: 28upx;
		padding: 0 20upx;
		color: #888;
	}

	.searchIcon {
		width: 34upx;
		height: 34upx;
		margin-right: 20upx;
	}

	.fixedTop {
		position: fixed;
		background: #ff8d5a;
		left: 0;
		width: 100%;
		z-index: 100;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
	}
</style>
